<!-- 这里不需要具有完全的布局，因为这个页面将与Ajax解析-->
<!-- 顶部导航栏 -->
<div class="navbar">
	<div class="navbar-inner">
		<div class="left">
			<a href="#" class="back link"> <i class="icon icon-back"></i><span>返回</span></a>
		</div>
		<div class="center sliding">
			可排序列表
		</div>
	</div>
</div>
<div class="pages">
	<!-- Page, data-page contains page name-->
	<div data-page="swipeout-content" class="page no-tabbar">
		<!-- Scrollable page content-->
		<div class="page-content">
			<div class="content-block">
			    <!-- 我们在data-sortable属性中指定目标可排序列表 -->
			    <p><a href="#" data-sortable=".sortable" class="open-sortable">开启排序</a></p>
			    <p><a href="#" data-sortable=".sortable" class="close-sortable">关闭排序</a></p>
			    <p><a href="#" data-sortable=".sortable" class="toggle-sortable">切换排序功能</a></p>
			</div>
			<div class="list-block sortable">
				<ul>
					<li>
						<div class="item-content">
							<div class="item-media">
								<i class="icon icon-f7"></i>
							</div>
							<div class="item-inner">
								<div class="item-title">
									Item 1
								</div>
								<div class="item-after">
									$10
								</div>
							</div>
						</div>
						<!-- 可排序句柄  -->
						<div class="sortable-handler"></div>
					</li>
					<li>
						<div class="item-content">
							<div class="item-media">
								<i class="icon icon-f7"></i>
							</div>
							<div class="item-inner">
								<div class="item-title">
									Item 2
								</div>
								<div class="item-after">
									$20
								</div>
							</div>
						</div>
						<div class="sortable-handler"></div>
					</li>
				</ul>
			</div>
		</div>
	</div>
</div>